<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>烟草客户 -- 客户店铺地图位置</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 20px; margin-bottom: 5px;">
        <%--<shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">--%>
            <%--<div class="form-group">--%>
                <%--<input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="市局名称">--%>
            <%--</div>--%>
            <%--<div class="form-group">--%>
                <%--<input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"--%>
                       <%--placeholder="区县名称">--%>
            <%--</div>--%>
        <%--</shiro:hasPermission>--%>
        <%--<shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">--%>
            <%--<shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">--%>
                <%--<div class="form-group">--%>
                    <%--<input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"--%>
                           <%--placeholder="渠道名称">--%>
                <%--</div>--%>
            <%--</shiro:lacksPermission>--%>
            <%--<div class="form-group">--%>
                <%--<input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"--%>
                       <%--placeholder="客户经理名称">--%>
            <%--</div>--%>
        <%--</shiro:lacksPermission>--%>

        <%--<div class="form-group">--%>
            <%--<input id="custNameInput" onfocus="this.value=''" class="form-control input-sm"   type="text" placeholder="客户名称">--%>
        <%--</div>--%>
      <%--  <div class="form-group">
            <input id="shopNameInput" onfocus="this.value=''" class="form-control input-sm"   type="text" placeholder="店铺名称">
        </div>--%>
        <%--<div class="form-group">--%>
            <%--<input id="custCodeInput" class="form-control input-sm"   type="text" placeholder="专卖证号">--%>
        <%--</div>--%>
       <%-- <div class="form-group">
            <select class="form-control input-sm" id="shopType">
                <option value="">店铺类型</option>
                <option value="直营">直营</option>
                <option value="加盟">加盟</option>
            </select>
        </div>--%>
        <%--<div class="form-group">--%>
            <%--<select class="form-control input-sm" id="isExp">--%>
                <%--<option value="-1">--是否试点--</option>--%>
                <%--<option value="1">是</option>--%>
                <%--<option value="0">否</option>--%>
            <%--</select>--%>
        <%--</div>--%>

        <%--<button type="button" class="btn btn-sm btn-success" @click="getOrder();">查询</button>--%>

    </form>
    <%--<div class="row" style="background-color: #0c3166;margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-12" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">烟草客户店铺位置</strong>
            <button style="position: absolute; top: -5px;right: 20px;"
                    class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
        </div>
    </div>--%>
</div>
<!-- 地图 -->
<div id="mapContainer">
    <div style="width: 100%;height: 558px" id="userLocationMap"></div>
</div>
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script type="text/javascript">

    total = document.documentElement.clientHeight;
    document.getElementById("userLocationMap").style.height=(total-80)+"px";

    var laypage = layui.laypage
        , layer = layui.layer;

    //地图相关

    var map = new AMap.Map('userLocationMap',{
       // resizeEnable: true,
        zoom: 12,
        //center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });

    var  geolocation;

    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType','AMap.Geolocation',], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(toolBar);
        map.addControl(scale);
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
        map.setCenter(new AMap.LngLat(data.position.getLng(),data.position.getLat()));
    }
    //解析定位错误信息
    function onError(data) {
        if (window.console) console.log(data)
        //layer.msg('定位失败');
    }

    var infoWindow = new AMap.InfoWindow();



    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            queryModel: {
                stringMap: {
                    cityName : '',
                    quXianName : '',
                    channelName : '',
                    empName : '',
                    custName: '',
                    custCode: '',
                    shopName: '',
                    isExp: '',
                    shopType: '',
                    TYPE: 'jiameng',
                },

            },
            markerList : [],
        },
        methods: {
            getOrder: function () {
                layer.load(1);
                this.disposeQP();
                console.log(app.queryModel)
                $.ajax({
                    url: '${contextPath}/checking/getWxCustomerShop',
                    type: 'post',
                    data: app.queryModel,
                    dataType: 'json',
                    success: function (data) {
                        layer.closeAll('loading');
                        map.remove(app.markerList);
                        map.clearInfoWindow();
                        app.markerList = [];
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message);
                            return
                        }
                        console.log(data)
                        var dataArray = data.data;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                            return;
                        }
                        //dataArray = [{CUST_CODE:'3232323',CUST_NAME:'dada',SHOP_ID:123,SHOP_NAME:'ddd',IS_EXP:'1',ADDRESS:'贵州省贵阳市白云区烟山红工大路',LONGITUDE:'106.68843',LATITUDE:'26.54832'}]
                        app.orderList = dataArray;
                        app.updateMap(dataArray);
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        map.remove(app.markerList);
                        map.clearInfoWindow();
                        app.markerList = [];
                        layer.msg('网络错误');
                        //console.log(error)
                    }
                })
            },
            disposeQP : function () {
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();
                var custName = $("#custNameinput").val();
                var custCode = $("#custCodeinput").val();
                var shopName = $("#shopNameInput").val();
                var isExp = $("#isExp").val();
                var shopType = $("#shopType").val();

                this.queryModel.stringMap.cityName = cityName;
                this.queryModel.stringMap.quXianName = quXianName;
                this.queryModel.stringMap.channelName = channelName;
                this.queryModel.stringMap.empName = empName;
                this.queryModel.stringMap.custName = custName;
                this.queryModel.stringMap.custCode = custCode;
                this.queryModel.stringMap.shopName = shopName;
                this.queryModel.stringMap.isExp = isExp;
                this.queryModel.stringMap.shopType = shopType;
                this.queryModel.stringMap.TYPE = 'jiameng';
            },
            updateMap : function (dataArray) {

               // map.setCenter(new AMap.LngLat(dataArray[0].LONGITUDE,dataArray[0].LATITUDE));
                var markerList=[];
                for (var index in dataArray) {
                    var markeInfo = dataArray[index];
                    var icon = null;

                    var image = '${contextPath}/static/image/t2.png';//24px*24px
                    if (markeInfo.SHOP_TYPE == '直营') {
                        image = '${contextPath}/static/image/t2.png';
                    }
                    if (markeInfo.SHOP_TYPE == '加盟') {
                        image = '${contextPath}/static/image/t1.png';
                    }

                    icon = new AMap.Icon({
                        image :image,
                        //icon可缺省，缺省时为默认的蓝色水滴图标，
                        size : new AMap.Size(45,45)
                    });

                    var marker = new AMap.Marker({
                        icon : icon,//24px*24px
                        position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                        title:markeInfo.SHOP_NAME,
                        offset : new AMap.Pixel(-12,-12),
                        map : map

                    });

                    marker.content = '<hr>专卖证号：'+ markeInfo.CUST_CODE +
                                  '<br>客户名称：'+ markeInfo.CUST_NAME +
                                  '<br>店铺名称：'+ markeInfo.SHOP_NAME +
                                  '<br>店铺类型：'+ markeInfo.SHOP_TYPE +
                                  '<br>店铺地址：'+((markeInfo.ADDRESS)!=null?markeInfo.ADDRESS:" ") +
                    '<hr>';
                   /* + '<button onclick="gotoLingShouHuFenXi(\''+ markeInfo.CUST_CODE +'\')" class="btn btn-info btn-xs">零售户分析</button>'*/
                    //鼠标点击marker弹出自定义的信息窗体
                   /* AMap.event.addListener(marker, 'click', function() {

                        var infoWindow = new AMap.InfoWindow({
                            content: content,  //使用默认信息窗体框样式，显示信息内容
                        });
                        infoWindow.open(map, marker.getPosition());
                    });*/
                    AMap.event.addListener(marker, 'click', function(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());
                    });


                    markerList.push(marker);

                }

                app.markerList = markerList;

            },
        }
    })

    app.getOrder();

    var cityNode = null, quXianNode  = null, channelNode  = null, empNode  = null, custNode  = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>
    custNode = '#custNameInput';
//    shopNode = '#shopNameInput';

    organization_tree('${contextPath}',cityNode, quXianNode, channelNode, empNode, custNode, shopNode);

    var gotoLingShouHuFenXi = function(custCode) {
        sessionStorage.setItem('cl-code',custCode);
        window.location.href="${contextPath}/checking/toCustomerSmokeStatistics"
    };

    $('.amap-locate').click();


    //获取店铺
    var getShop = function () {
        var shopQuery = {};
        var filters = {
            "rules": [
                {
                    "field": "type",
                    "data": 'kt'
                },
                {
                    "field" : "state",
                    "data": '1'
                }
            ]
        };

        shopQuery.shopType = "'加盟', '直营'";
        shopQuery.filters = JSON.stringify(filters);
        shopQuery.state = '5';
        $.ajax({
            url: '${contextPath}/ktCommon/getShopList2User',
            type: 'post',
            data: shopQuery,
            success: function (data) {
                var shopArray = []
                for(var i = 0; i < data.length; i++){
                    var shop = {}
                    shop.value = data[i].shopName;
                    shop.data = data[i].shopId;
                    shopArray.push(shop);
                }
                var countries = shopArray
                $('#shopNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                    },
                    minChars: 0,
                });
            },
            error: function (error){
                get();
                layer.msg("获取出错："+data.message)
            }
        })
    }

    getShop();
</script>
</html>





